import React, { Component } from 'react';
import Debounce from 'lodash-decorators/debounce';
import { connect } from 'dva';

import { Button, Menu, Dropdown, Icon,Rate, Row, Col, Steps, Card, Popover, Badge, Table, Tooltip, Divider } from 'antd';
import classNames from 'classnames';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import styles from './ServiceOrderDetail.less';
import ChooseUserModal from '../../components/service/ChooseUserModal';
import ChangePriceModal from '../../components/service/ChangePriceModal';


const { Step } = Steps;
const { Description } = DescriptionList;
const ButtonGroup = Button.Group;

const getWindowWidth = () => (window.innerWidth || document.documentElement.clientWidth);

const action =(item,dispatch)=> (
  <div>
    <ButtonGroup>
      <Button disabled={item.order_status != 0}>取消订单</Button>
      <Button onClick={()=>{
        dispatch(
          { type:'service_order/remove',payload:{id:item.id},callback:()=>{
            dispatch(routerRedux.push('/service/order'));
          }}
        )
      }} disabled={item.order_status != 4}>删除订单</Button>
    </ButtonGroup>
    <Button disabled={item.order_status != 0} onClick={()=>{ dispatch(
      { type:'service_order/changeChooseVisible',payload:true}); 
      dispatch({
        type: 'service_order/fecthSupports',
        payload: {order_id:item.id,service_id:item.service_id}
    }) }} type="primary">师傅派单</Button>
  </div>
);

const extra =(item)=> (
  <Row>
    <Col xs={24} sm={12}>
      <div className={styles.textSecondary}>状态</div>
      <div className={styles.heading}>{item.order_status_label}</div>
    </Col>
    <Col xs={24} sm={12}>
      <div className={styles.textSecondary}>订单金额</div>
      <div className={styles.heading}>{Number(item.price) == 0?'需要议价':`￥ ${item.price}`}</div>
    </Col>
  </Row>
);

const description =(item)=> (
  <DescriptionList className={styles.headerList} size="small" col="2">
    <Description term="预约用户">{item.user.name}</Description>
    <Description term="预约服务">{item.service.name}</Description>
    <Description term="预约时间">{item.created_at}</Description>
    <Description term="备注">{item.remark}</Description>
  </DescriptionList>
);




@connect(state => ({
  service_order: state.service_order,
}))
export default class ServiceOrderDetail extends Component {
  state = {
    operationkey: 'tab1',
    stepDirection: 'horizontal',
  }

  componentDidMount() {
    const { dispatch,match } = this.props;
    dispatch({
      type: 'service_order/fetchItem',
      payload:{id: match.params.id},
    });

    this.setStepDirection();
    window.addEventListener('resize', this.setStepDirection);
  }

    componentDidCatch(error, errorInfo) {
        console.log(error,errorInfo)
    }

  onChangeSend = (user_id)=>{
    if(user_id){
      const { dispatch,match } = this.props;
      dispatch({
        type:'service_order/change',
        payload:{id: match.params.id,user_id:user_id},
        callback:()=>{
          dispatch({
            type:"service_order/changeChooseVisible",
            payload:false,
          })
        }
      })
    }
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.setStepDirection);
  }

  onOperationTabChange = (key) => {
    this.setState({ operationkey: key });
  }

  @Debounce(200)
  setStepDirection = () => {
    const { stepDirection } = this.state;
    const w = getWindowWidth();
    if (stepDirection !== 'vertical' && w <= 576) {
      this.setState({
        stepDirection: 'vertical',
      });
    } else if (stepDirection !== 'horizontal' && w > 576) {
      this.setState({
        stepDirection: 'horizontal',
      });
    }
  }

  render() {
    const { stepDirection } = this.state;
    const { service_order:{item},dispatch } = this.props;

    return (
      <PageHeaderLayout
        title={`服务单：${item.order_no}`}
        logo={<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" />}
        action={action(item,dispatch)}
        content={description(item,dispatch)}
        extraContent={extra(item,dispatch)}
      >
        <Card title="服务进度" style={{ marginBottom: 24 }} bordered={false}>
          <Steps direction={stepDirection} current={item.order_status}>
            <Step title="预约服务" />
            <Step title="师傅派单" />
            <Step title="用户验收" />
            <Step title="支付完成" />
            {item.order_status == 4 ?( <Step title="订单取消" />):null}
          </Steps>
        </Card>
        <Card title="用户信息" style={{ marginBottom: 24 }} bordered={false}>
          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="联系人">{item.contact_name}</Description>
            <Description term="联系电话">{item.contact_phone}</Description>
            <Description term="联系地址"><a target="_blank" href={`http://api.map.baidu.com/marker?location=${item.location[0]},${item.location[1]}&title=联系地址&content=${item.address}&output=html`}>{item.address}</a>
            </Description>
          </DescriptionList>

          <Card type="inner" title="服务师傅">
            {item.support_user ? (
            <DescriptionList size="small" style={{ marginBottom: 16 }} title="接单师傅">
              <Description term="姓名">{item.support_user?item.support_user.info.true_name : ''}</Description>
              <Description term="电话">{item.support_user?item.support_user.phone : ''}</Description>
              <Description term="地址"><a href={`http://api.map.baidu.com/marker?location=${item.support_user.info.location[0]},${item.support_user.info.location[1]}&title=师傅位置&content=${item.address}&output=html`} target="_blank">{item.support_user?item.support_user.info.address:""}</a></Description>
              <Description term="服务单数">{item.support_user.service_count}</Description>
              <Description term="评级"><Rate disabled defaultValue={item.support_user?item.support_user.info.star:0} /></Description>
            </DescriptionList>) : 
            <div className={styles.noData}>
            <Icon type="frown-o" />还未派遣师傅进行服务
          </div>}
          </Card>
        </Card>
       <ChooseUserModal onChangeSend={(user_id)=>{}} item={item} />
       <ChangePriceModal item={item} />
      </PageHeaderLayout>
    );
  }
}
